<template>
    <button v-if="zhuguan" class="new btn btn-primary col-md-offset-7" @click="toggleHomework($event)">新建</button>

    <div class="detailBar clearfix">
        <img class="topButton" src="/dist/img/admin/close.png" @click="close()">
        <img class="topButton" v-if="zhuguan && selfCheckOpen" src="/dist/img/admin/back.png" @click="back()">
        <!-- 已提交人员名单 -->
        <submit-persons
            v-if="submitPersonsOpen"
            :homework.sync="homework"
            :submit-persons="submitPersons"
            :self-check-open.sync="selfCheckOpen"
            :master-check-open.sync="masterCheckOpen"
            :detail-open.sync="detailOpen"
            :submit-persons-open.sync="submitPersonsOpen">
        </submit-persons>

        <!-- 任务介绍 -->
        <homework-detail v-if="detailOpen" :homework="homework" :zhuguan="zhuguan" :homeworks="homeworks"></homework-detail>

        <!-- 我的作业 -->
        <self-check v-if="selfCheckOpen" :homework="homework" :zhuguan="zhuguan"></self-check>

        <!-- 导师评价 -->
        <master-check v-if="masterCheckOpen" :homework="homework" :zhuguan="zhuguan"></master-check>

        <!-- 新建任务表单 -->
        <add-homework v-if="zhuguan && add" :new-homework="newHomework" :homeworks="homeworks"></add-homework>

        <!-- 优秀作品展示 -->
        <!-- <div class="homework-detail-display">
            <h4>优秀作品展示</h4>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
        </div> -->

    </div>

</template>

<style lang="sass">
    .upload{
        float:right;
        position: relative;
        input{
            opacity: 0;
            width: 56px;
            height: 14px;
            position: absolute;
            top: 2px;
            font-size: 0;
            cursor: pointer;
        }
    }
    .submit{
        cursor: pointer;
        display: inline-block;
    }
    .new {
        position: absolute;
        top: 48px;
        height: 24px;
        width: 72px;
        line-height: 24px;
        padding: 0;
        background: #3498db;
        border: none;
        font-size: 14px;
    }
    .detailBar{
        transition:all 0.5s ease;
        width: 340px;
        position: absolute;
        right: 0px;
        top: 100px;
        border: 1px solid #dedede;
        box-shadow: -5px -5px 10px #dedede;
        padding: 30px 30px 0 30px;
        opacity: 0;
        z-index: -1;
        font-size: 14px;
        bottom:0;
        min-height:700px;

        .topButton{
            float: right;
            margin-left:16px;
            cursor: pointer;
        }
        div{
            padding-bottom: 10px;
            border-bottom: 1px solid #cfcfcf;
            margin-bottom: 30px;
        }
        h4{
            color: #3399ff;
            font-size: 18px;
            margin:0 0 20px 0;
        }
        a{
            color:#39f;
        }
        .score-div{
            border:none;
            margin: 0;
            padding-bottom: 30px;
            .score-ul{
                float: left;
                li{
                    width: 8px;
                    height: 17px;
                    background-color: #d5d6d7;
                    float: left;
                    margin-top: 10px;
                    margin-right: 10px;
                    border-radius: 10px;
                }
            }
            .score{
                    margin: -5px 0 0 0;
                    border: none;
                    padding: 0;
                    float: right;
                input, p{
                    font-size: 28px;
                    width: 42px;
                    display: inline-block;
                    text-align: right;
                    border: none;
                    margin: 0;
                    padding: 0;
                }
                .smallFont{
                    font-size:14px;
                }
            }
            .score:before{
                content: '/';
                position: relative;
                left: 60px;
                font-size: 30px;
                top: 10px;
                color:#414550;
            }
            .score:after{
                content: '10';
                position: relative;
                top: 14px;
                left: 6px;
                color:#414550;
            }
        }
    }
</style>

<script>
    export default{
        props:['homework', 'zhuguan', 'homeworks', 'submitPersons','selfCheckOpen','masterCheckOpen','detailOpen', 'submitPersonsOpen'],
        data(){
            return {
                add:false,
            }
        },
        methods: {
            // 关闭详情栏
            close(){
                var detailBar = document.getElementsByClassName('detailBar')[0],     // 详情栏
                    tableParent = document.getElementsByClassName('table-parent')[0],
                    newButton = document.getElementsByClassName('new')[0];

                detailBar.style.opacity = 0;
                detailBar.style['z-index'] = -1;
                tableParent.style.marginRight = '40px';
                newButton.innerHTML = '新建';
                this.add = false;
            },
            back(){
                this.add = false;
                this.submitPersonsOpen = true;
                this.detailOpen = true;
                this.selfCheckOpen = false;
                this.masterCheckOpen = false;
            },
            toggleHomework($event){
                var homework = document.getElementsByClassName('detailBar')[0],     // 详情栏
                    tableParent = document.getElementsByClassName('table-parent')[0],
                    tableTr = tableParent.getElementsByTagName('tr'),   // 行
                    eventTr = $event.target.parentNode;     // 点击行

                this.add = !this.add;
                this.selfCheckOpen = false;
                this.masterCheckOpen = false;
                this.detailOpen = false;
                this.submitPersonsOpen = false;

                if ($event.target.innerText == '新建') {
                    $event.target.innerText = '取消';
                    // 展开详情栏
                    homework.style.opacity = 1;
                    homework.style['z-index'] = 0;
                    tableParent.style.marginRight = '380px';

                }else{
                    $event.target.innerText = '新建';
                    // 关闭详情栏
                    homework.style.opacity = 0;
                    homework.style['z-index'] = -1;
                    tableParent.style.marginRight = '40px';
                }


            },

        },
        components:{
            'homeworkDetail': require('../components/homeworkDetail.vue'),
            'selfCheck': require('../components/selfCheck.vue'),
            'masterCheck': require('../components/masterCheck.vue'),
            'submitPersons': require('../components/submitPersons.vue'),
            'addHomework': require('../components/addHomework.vue'),
        }
    }
</script>
